<template>
	<view>
    <!-- 搜索框组件 -->
    <!-- 单纯的声明点击事件是没有用的,需要组件内部暴露一个点击事件 -->
    <my-search @click="gotoSearch"></my-search>
    
		<view class="scroll-view-container">
		  <!-- 左侧滚动视图 -->
      <scroll-view class="scroll-view-left" scroll-y="true" :style="{height:wh+'px'}" >
        <block v-for="(item,index) in cateList" :key="i">
          <!-- 动态设置激活类,小程序里默认样式和动态样式可以写一起,用数组包裹 -->
        <view :class="['left-scroll-view-item', index===active ? 'active':'']" @click="changeActive(index)">{{item.cat_name}}</view>
        </block>

      </scroll-view>
      <!--右侧滚动视图 -->
      <!-- 每次切换的时候,不要保留上一次的滚动位置 -->
      <scroll-view class="scroll-view-right" scroll-y="true" :style="{height:wh+'px'}" :scroll-top="scrollTop">
      <!-- 渲染二级分类 -->
      <view class="cate-lv2" v-for="(item,index) in cateLevel2" :key="index">
        <!-- 渲染二级分类名称 -->
        <view class="cate-lv2-title">
          / {{item.cat_name}} /
        </view>
        <!-- 渲染三级分类 -->
        <view class="cate-lv3-list">
          <!-- 绑定点击事件=>实现跳转到商品列表页 -->
          <view class="cate-lv3-item" v-for="(item3,index3) in item.children" :key="index3" @click="gotoGoodsList(item3)">
            <image :src="item3.cat_icon" mode=""></image>
            <text>{{item3.cat_name}}</text>
          </view>
        </view>
      </view>
      </scroll-view>
		</view>
	</view>
</template>

<script>
	import tabBarMixin from '../../mixins/tabbar-badge.js'
		export default {
	    // 将封装的mixins中的节点映射为当前组件的节点
	    mixins:[tabBarMixin],
		data() {
			return {
				wh:0, //可使用窗口高度
        cateList:[], //分类的数组
        active:0,  //激活的索引
        cateLevel2:[], //二级分类数据
        scrollTop:0 //设置竖向滚动条位置
			};
		},
    onLoad() {
      // 调用获取系统API的方法=同步获取系统信息
      const systemInfo=uni.getSystemInfoSync()
      // 根据系统返回的系统信息,获取可使用窗口高度
      //  可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
      this.wh=systemInfo.windowHeight-50
      
      // 调用获取分类数据的方法
      this.getCateList()
    },
   methods:{
     // 获取分类数据的方法
    async getCateList(){
     const {data:res}  = await uni.$http.get('/categories')
     if(res.meta.status!==200) return uni.$showMsg()
     // console.log(res)
     this.cateList=res.message
     // 默认cateLevel2数组里保存的是第一项二级分类数据
     this.cateLevel2= this.cateList[0].children
     },
     
     // 点击切换激活类方法
     changeActive(i){
       // 点击,把传过来的索引给active
       this.active=i
       
       // 通过点击对应的索引,将cateList二级分类数据保存到cateLevel2数组里
       this.cateLevel2=this.cateList[i].children
       
       // 点击,将滚动位置清0=>如果设置为0的话,值没有任何变化所以不会出效果
       // this.scrollTop=0  没效果
       // 所以,如果默认是0的话设置0.1用户感觉不到,如果是0.1,就改为0
       this.scrollTop=this.scrollTop===0?0.1:0
     },
     
     // 点击跳转商品列表页面
     gotoGoodsList(item){
       uni.navigateTo({
         url:'/subpkg/goods-list/goods-list?cid='+item.cat_id
       })
     },
     
     // 点击组件跳转到搜索页面
     gotoSearch(){
       uni.navigateTo({
         url:'/subpkg/search/search'
       })
   }
	}
  }
</script>

<style lang="scss">
.scroll-view-container{
  display: flex;
  .scroll-view-left {
    width: 120px;
    .left-scroll-view-item{
      background: #f7f7f7;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 28rpx;
      &.active {
        background: #ffffff;
        position: relative;
        &::before {
          content: '';
          display: block;
          width: 3px;
          height: 30px;
          background: #c00000;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
        }
      }
    }
  }
  .scroll-view-right {
    .cate-lv2 {
      .cate-lv2-title {
        font-size: 28rpx;
        font-weight: bold;
        text-align: center;
        margin-top: 22px;
      }
      .cate-lv3-list {
        display: flex;
        flex-wrap: wrap;
        .cate-lv3-item {
          width: 33.3%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 16rpx;
          image{
            width: 140rpx;
            height:140rpx ;
          }
          text{
            font-size: 28rpx;
          }
        }
      }
  }
  }
  }
</style>
